<template>
  <div class="mini">
    <div class="mini-bar">
      <template>
        <div class="avatar-wrapper">
          <img v-lazy="current_song.avatar" width="50" height="50" :key="current_song.id" v-if="current_song.avatar">
          <z-icon type="yinle" style="fontSize:30px" v-else /> 
        </div>
        <div class="song-info no-drag">
          <div class="song-name">
            <span>{{current_song.name}}</span>
            <small>{{artistStr}}</small>
          </div>
          <artists :artists="current_song.artist" v-if="!current_lyric"/>
          <div class="playing-lyric no-drag" v-else>
            <transition name="lyric">
              <span class="current-lyric" :title="current_lyric" :key="current_lyric">{{current_lyric}}</span>
            </transition>
          </div>
          <div class="controls">
            <a-icon type="step-backward" class="icon no-drag" @click="backward"/>
            <a-icon :type="playIcon" class="icon no-drag" @click="togglePlay"/>
            <a-icon type="step-forward" class="icon no-drag" @click="forward"/>
          </div>
        </div>
        <song-heart
          class="item no-drag"
          :isLiked="likedsongIds.includes(current_song.id)"
          @heartClick="(isLike)=>{_handleLikeSong({songId:current_song.id,isLike})}"
          title="喜欢歌曲"
          v-show="!current_song.folder"
        />
        <a-icon class="item no-drag" type="bars" @click.native="showList"  title="播放列表" />
        <z-icon class="item no-drag" type="juxing" @click.native="setFrame" title="普通模式" />
      </template>
    </div>
    
    <div class="mini-list" ref="scrollWrapper">
      <ul v-if="current_play_list.length">
        <li
          v-for="(song, index) in current_play_list"
          :key="song.id"
          @dblclick="playSong(current_play_list, index)"
        >
          <playing :playing="playing" v-if="current_song.id==song.id"/>
          <span v-else>{{index>8?index+1:'0'+(index+1)}}</span>
          <span class="song-name" :title="song.name">{{song.name}}</span>
          <span class="duration">{{ song.duration | duration }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { KEEP_STATE_KEY } from '@/config/config'
import { mapGetters, mapState } from 'vuex'
import { ipcRenderer, remote } from 'electron'
import ZIcon from '@/components/ZIcon'
import SongHeart from '@/components/Common/song-heart'
import Playing from '@/components/Common/playing'
import Artists from '@/components/Common/artists'

export default {
  name: 'mini',
  data () {
    return {
      isShowList: false
    }
  },
  components: {
    ZIcon,
    SongHeart,
    Playing,
    Artists
  },
  computed: {
    ...mapState('play', ['current_lyric', 'playing']),
    ...mapGetters('play', ['current_play_list', 'original_play_list', 'current_song_index', 'current_song']),
    ...mapGetters('User', ['likedsongIds']),
    current_song () {
      return this.current_play_list[this.current_song_index] || {}
    },
    playIcon () {
      return this.playing ? 'pause-circle' : 'play-circle'
    },
    artistStr () {
      return this.current_song.artist.map(item => item.name).join(',')
    }
  },
  watch: {
    isShowList (newVal, oldVal) {
      if (newVal === true && oldVal === false) {
        let index = this.current_play_list.findIndex(item => {
          return item.id === this.current_song.id
        })
        let top = index * 35
        this.$refs.scrollWrapper.scrollTo({top, behavior: 'smooth'})
      }
    }
  },
  methods: {
    togglePlay () {
      this.$electron.ipcRenderer.send('toggle-play', {
        value: !this.playing
      })
    },
    backward () {
      this.$electron.ipcRenderer.send('prev-play', {
        value: this.current_song_index
      })
    },
    forward () {
      this.$electron.ipcRenderer.send('next-play', {
        value: this.current_song_index
      })
    },
    playSong (tracks, index) {
      this.$electron.ipcRenderer.send('play-song', {
        value: { tracks, index }
      })
    },
    setFrame () {
      this.$electron.ipcRenderer.send('toggle-mini', {
        value: false,
        playing: this.playing
      })
    },
    showList () {
      this.isShowList = !this.isShowList
      this.$electron.ipcRenderer.send('resize-mini', {
        height: this.isShowList ? 500 : 50
      })
    },
    _handleLikeSong ({ songId, isLike }) {
      this.$store.dispatch('User/handleLikeSong', { songId, isLike })
    }
  }
}
</script>

<style lang="less" scoped>
.mini {
  height: 100vh;
  background: #fff;
  .mini-bar {
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #f3f3f3;
    -webkit-app-region: drag;
    .avatar-wrapper {
      width: 50px;
      height: 100%;
      flex: 0 0 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f7f7f7;
    }
    .item {
      padding: 0 5px;
      opacity: .8;
      cursor: pointer;
      &:hover {
        opacity: 1;
      }
    }
    .song-info {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      padding-left: 10px;
      color: #111;
      overflow: hidden;
      .song-name {
        height: 25px;
        line-height: 25px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #000;
        font-weight: 600;
        small {
          color: #999;
          font-weight: normal;
        }
      }
      .playing-lyric {
        height: 25px;
        position: relative;
        overflow: hidden;
        color: #333;
        .current-lyric {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          z-index: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 13px;
        }
      }
      &:hover {
        .controls {
          display: flex
        }
      }
      .controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 1;
        background: #fafafa;
        align-items: center;
        justify-content: space-evenly;
        display: none;
        .icon {
          color: #c62f2f;
          font-size: 26px;
          opacity: .8;
          cursor: pointer;
          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }
  .mini-list {
    max-height: 550px;
    overflow-y: auto;
    li {
      display: flex;
      align-items: center;
      height: 35px;
      padding: 0 5px;
      background: #fff;
      &:nth-child(odd){
        background: #f3f5f7;
      }
      &:hover {
        background: #eee;
      }
      .song-name {
        flex: 1;
        margin-left: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #000;
      }
      .duration {
        width: 60px;
        flex: 0 0 60px;
        text-align: right;
        font-size: 13px;
        color: #999;
      }
    }
  }
  .no-drag {
    -webkit-app-region: no-drag;
  }
  .item {
    font-size: 20px;
  }
}
</style>
